<template>
	<common-page title="注册新账号">
		<el-steps :active="stepActive" simple finish-status="success">
			<el-step title="基础信息" />
			<el-step title="完成注册" />
		</el-steps>
		<el-form v-if="stepActive == 0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="验证码" prop="code">
				<div style="display: flex; align-items: center;">
					<el-input v-model="form.code" placeholder="请输入验证码" style="flex: 1;"></el-input>
					<el-button @click="slideblock" :disabled="codeDisabled" style="margin-left: 10px;">
						{{ codeText }}
					</el-button>
				</div>
			</el-form-item>
			<el-form-item label="公司名称" prop="company">
				<el-input v-model="form.company" placeholder="请输入公司名称"></el-input>
			</el-form-item>
			<el-form-item label="联系人" prop="contact">
				<el-input v-model="form.contact" placeholder="请输入联系人姓名"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
				<sc-password-strength v-model="form.password"></sc-password-strength>
				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="password_confirm">
				<el-input v-model="form.password_confirm" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
			</el-form-item>
			<el-form-item label="" prop="agree">
				<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree = true">《平台服务协议》</span>
			</el-form-item>
		</el-form>
		<div v-if="stepActive == 1">
			<el-result icon="success" title="注册成功" sub-title="可以使用手机号登录系统">
				<template #extra>
					<el-button type="primary" @click="goLogin">前去登录</el-button>
				</template>
			</el-result>
		</div>
		<el-form style="text-align: center;">
			<!-- <el-button v-if="stepActive > 0" @click="pre">上一步</el-button> -->
			<el-button v-if="stepActive < 1" type="primary" :loading="isSaveing" @click="next">提交</el-button>
		</el-form>
		<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
			平台服务协议
			<template #footer>
				<el-button @click="showAgree = false">取消</el-button>
				<el-button type="primary" @click="showAgree = false; form.agree = true;">我已阅读并同意</el-button>
			</template>
		</el-dialog>
		<el-dialog v-model="showBlock" title="滑动验证" :width="350" destroy-on-close>
			<!--:imgs="captchaList"-->
			<slide-verify ref="block" :slider-text="text" :accuracy="accuracy" @again="onAgain" @success="onSuccess" @fail="onFail" @refresh="onRefresh"></slide-verify>
		</el-dialog>
	</common-page>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength';
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import commonPage from './components/commonPage'
import "vue3-slide-verify/dist/style.css";
import config from '@/config'
export default {
	components: {
		commonPage,
		SlideVerify,
		SlideVerifyInstance,
		scPasswordStrength
	},
	data() {
		return {
			stepActive: 0,
			showAgree: false,
			codeDisabled: false,
			showBlock: false,
			codeText: '获取验证码',
			form: {
				mobile: "",
				code: "",
				company: "",
				contact: "",
				agree: false,
				password: "",
				password_confirm: "",
			},
			rules: {
				mobile: [
					{ required: true, message: '请输入手机号' },
					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
				],
				code: [
					{ required: true, message: '请输入验证码' }
				],
				company: [
					{ required: true, message: '请输入公司名称' }
				],
				contact: [
					{ required: true, message: '请输入联系人姓名' }
				],
				password: [
					{ required: true, message: '请输入密码' }
				],
				password_confirm: [
					{ required: true, message: '请再次输入密码' },
					{
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致'));
							} else {
								callback();
							}
						}
					}
				],
				agree: [
					{
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('请阅读并同意协议'));
							} else {
								callback();
							}
						}
					}
				]
			},
			msg: '',
			text: '向右滑动验证，拖过滑块完成上图中的拼图',
			captchaList: [
				config.API_URL + '/wechat/captcha/verify1.png',
				config.API_URL + '/wechat/captcha/verify2.png',
				config.API_URL + '/wechat/captcha/verify3.png',
				config.API_URL + '/wechat/captcha/verify4.png',
				config.API_URL + '/wechat/captcha/verify5.png',
				config.API_URL + '/wechat/captcha/verify6.png',
				config.API_URL + '/wechat/captcha/verify7.png',
				config.API_URL + '/wechat/captcha/verify8.png',
				config.API_URL + '/wechat/captcha/verify9.png',
				config.API_URL + '/wechat/captcha/verify10.png',
			],
			isSaveing: false,
		}
	},
	methods: {
		onSuccess(times) {
			this.msg = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
			this.showBlock = false;
			this.getCode(); // 验证成功后获取验证码
		},
		onFail() {
			this.msg = "验证不通过";
		},
		onRefresh() {
			this.msg = "点击了刷新小图标";
		},
		onAgain() {
			this.msg = "检测到非人为操作的哦！ try again";
			this.$refs.block.refresh();
		},
		handleClick() {
			this.$refs.block.refresh();
			this.msg = "";
		},
		pre() {
			this.stepActive -= 1
		},
		next() {
			const formName = `stepForm_${this.stepActive}`
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.common.shopRegister.post(this.form);
					this.isSaveing = false;
					if (res.code == 1) {
						this.stepActive += 1
					} else {
						this.$alert(res.message, "提示", { type: 'error' })
					}

				} else {
					return false
				}
			})
		},
		slideblock() {
			if (!this.form.mobile) {
				this.$message.error('请输入手机号')
				return false;
			}
			this.showBlock = true;
		},
		getCode() {
			// 验证通过后发送短信验证码
			this.$API.common.sendSmsCode.post({
				mobile: this.form.mobile,
			}).then(res => {
				if (res.code === 1) {
					let time = 60;
					this.codeDisabled = true;
					this.codeText = `${time}秒后重新获取`;

					const timer = setInterval(() => {
						time--;
						this.codeText = `${time}秒后重新获取`;
						if (time <= 0) {
							clearInterval(timer);
							this.codeDisabled = false;
							this.codeText = '获取验证码';
						}
					}, 1000);
					this.$message.success('验证码已发送');
				} else {
					if (res.data.status == 1) {
						this.$alert(res.message, "提示", {
							type: 'error',
							showCancelButton: true,
							confirmButtonText: '去登录',
							cancelButtonText: '继续注册',
							callback: (action) => {
								if (action === 'confirm') {
									this.$router.push('/login');
								}
							}
						});
					} else {
						this.$message.error('验证码发送失败：' + res.message);
					}
				}
			});
		},
		goLogin() {
			this.$router.push({
				path: '/login'
			})
		}
	}
}
</script>

<style scoped>
.yzm {
	display: flex;
	align-items: center;
}
</style>
